<template>
  <div class="content_cell">
    <van-cell v-for="(item, index) in list" :key="index">
      <van-image
        slot="icon"
        round
        width="30"
        height="30"
        style="margin-right: 10px"
        :src="item.aut_photo"
      />
      <span style="color: #466b9d" slot="title">{{ item.aut_name }}</span>
      <div slot="label">
        <p style="color: #363636">{{ item.content }}</p>
        <p>
          <span style="margin-right: 10px">{{
            item.pubdate | RelativeTime
          }}</span>
          <van-button size="mini" type="default"
          @click="replayCommentFn(item)"
            >回复 {{ item.reply_count }}</van-button
          >
        </p>
      </div>
      <template #right-icon>
        <div
          :style="{ color: item.like_count ? 'orange' : '#333' }"
          @click="likeComment(item)"
        >
          <van-icon
            slot="right-icon"
            :name="item.like_count ? 'good-job' : 'good-job-o'"
          />
          <span class="zan">{{ item.like_count || "赞" }}</span>
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { addCommentLike, deleteCommentLike } from "@/api/comment";
import eventBus from "@/utlis/bus";
export default {
  props: ["list"],
  methods: {
    async likeComment(item) {
      if (item.is_liking) {
        // 取消点赞
        await deleteCommentLike(item.com_id);   //关于like _count
        item.like_count -= 1;  
      } else {
        // 点赞
        await addCommentLike(item.com_id);
        item.like_count += 1;
      }
      item.is_liking = !item.is_liking;
    },
    replayCommentFn(item){
      eventBus.$emit('replayComment',item)
    }  
    },
};
</script>

<style lang="less" scoped>
.content_cell {
  .zan {
    line-height: 1;
  }
}
</style>